// SearchResult.tsx
import React, { useMemo } from "react";
import { Product } from "@/business.InterfaceLayer/type";

interface SearchResultProps {
  results: Product[];
}

const SearchResult: React.FC<SearchResultProps> = ({ results }) => {
  const renderResults = useMemo(() => results, [results]);

  return (
    <div className="absolute top-[50px] left-0 w-72 bg-bgGen rounded-lg border-[2px] border-borderColor shadow-sm py-[10px] z-10">
      <div className="flex overflow-y-auto text-textColor flex-col gap-3 max-h-40 px-[16px]">
        {renderResults.map((product) => (
          <h5
            className="text-h5 text-textColor font-medium"
            key={product.product_id}
          >
            {product.title}
          </h5>
        ))}
        {!renderResults.length && (
          <h5 className="text-h5 font-semibold font-medium">
            Ничего не найдено
          </h5>
        )}
      </div>
    </div>
  );
};

export default React.memo(SearchResult);
